<template>
	<view class="content">
		<!-- 状态栏 -->
		<view v-if="hasData" class="todo-header">
			<!-- 状态栏左侧 -->
			<view class="todo-header__left">
				<text class="active-text">{{countText}}</text>
				<text>{{listData.length}}条</text>
			</view>
			<!-- 状态栏右侧 -->
			<view class="todo-header__right">
				<view class="todo-header__right-item" :class="{'active-tab':activeTabIndex ===0}" @click="tab(0)">全部
				</view>
				<view class="todo-header__right-item" :class="{'active-tab':activeTabIndex ===1}" @click="tab(1)">待办
				</view>
				<view class="todo-header__right-item" :class="{'active-tab':activeTabIndex ===2}" @click="tab(2)">已完成
				</view>
			</view>
		</view>


		<!-- todo内容 -->
		<!-- 没有数据状态 -->
		<view v-if="list.length === 0" class="default">
			<view class="image-default">
				<image src="../../static/default.png" mode="aspectFit"></image>
			</view>
			<view class="defualt-info">
				<view class="default-info__text">还没有任何待办</view>
				<view class="default-info__text">点击下方+号创建一个吧</view>
			</view>
		</view>
		<!-- 有数据状态 -->
		<view v-else class="todo-content">
			<!-- todo--finish -->
			<view class="todo-list" :class="{'todo--finish':item.checked}" v-for="(item,index) in listData"
				:key="item._id" @click="finish(item._id)">
				<view class="todo-list__checkbox">
					<view class="checkbox"></view>
				</view>
				<view class="todo-list__content">
					{{item.content}}
				</view>
			</view>
		</view>

		<!-- todo创建按钮 -->
		<view class="create-todo" @click="create">
			<text class="iconfont icon-jia" :class="{'create-todo-active':aniShow}"></text>
		</view>


		<!-- todo输入框 -->
		<view v-if="active" class="create-content" :class="{'create-active':aniShow}">
			<view class="create-content-box">
				<!-- 输入 -->
				<view class="create-input">
					<input type="text" v-model="value" placeholder="添加待办" />
				</view>
				<!-- 发布按钮 -->
				<view class="create-button" @click="add">
					添加
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex';

	const db = uniCloud.database();
	const dbCollectionName = 'todoList';

	export default {
		data() {
			return {
				list: [],
				active: false,
				value: '',
				activeTabIndex: 0,
				countText: '全部',
				aniShow: false
			}
		},
		onPullDownRefresh() {
			db.collection('todoList').where({
				userId: this.userInfo._id
			}).get().then((res) => {
				let data = res.result.data
				data.sort((A, B) => {
					let x = A.register_date
					let y = B.register_date
					if (x < y) {
						return 1;
					} else if (x > y) {
						return -1;
					} else {
						return 0;
					}
				})

				// this.list.push(...data)
				this.list = data
				uni.stopPullDownRefresh()
			})
		},
		computed: {
			...mapGetters({
				userInfo: 'user/info',
				hasLogin: 'user/hasLogin'
			}),
			hasData() {
				if (!this.hasLogin) {
					this.list = []
					return false
				} else {

					// this.list.length !== 0 ? 0 : 0
					console.log('this.userInfo._id', this.userInfo._id)
					db.collection('todoList').where({
						userId: this.userInfo._id
					}).get().then((res) => {
						console.log('res..', res)
						console.log('this', this)

						let data = res.result.data
						data.sort((A, B) => {
							let x = A.register_date
							let y = B.register_date
							if (x < y) {
								return 1;
							} else if (x > y) {
								return -1;
							} else {
								return 0;
							}
						})

						// this.list.push(...data)
						this.list = data
						console.log('this.list', this.list)
					})
					return true
				}
			},
			// ...mapGetters('user',{userInfo:'info',hasLogin:'hasLogin'}),
			listData() {
				// 拷贝数组
				let list = JSON.parse(JSON.stringify(this.list))
				let newList = []
				// 点击全部
				if (this.activeTabIndex === 0) {
					this.countText = '全部'
					return list
				}
				// 点击待办
				if (this.activeTabIndex === 1) {
					list.forEach((item) => {
						if (!item.checked) {
							newList.push(item)
						}
					})
					this.countText = '待办'
					return newList
				}
				// 点击已完成
				if (this.activeTabIndex === 2) {
					list.forEach((item) => {
						if (item.checked) {
							newList.push(item)
						}
					})
					this.countText = '已完成'
					return newList
				}
				return []
			}
		},
		methods: {
			// 打开输入框
			create() {
				console.log(this.active)
				if (this.active) {
					this.aniClose()
				} else {
					this.aniOpen()
				}
			},
			// 打开动画
			aniOpen() {
				this.active = true
				this.$nextTick(() => {
					setTimeout(() => {
						this.aniShow = true
					}, 50)
				})
			},
			// 关闭动画
			aniClose() {
				this.aniShow = false
				this.$nextTick(() => {
					setTimeout(() => {
						this.active = false
					}, 350)
				})
			},
			// 发布
			add() {
				if (this.value === '') {
					uni.showToast({
						title: '请输入',
						icon: "none"
					})
					return
				}
				if (!this.hasLogin) {
					uni.navigateTo({
						url: "../ucenter/login-page/index/index"
					});
					return
				}
				console.log('userInfo', this.userInfo)
				console.log('hasLogin', this.hasLogin)

				// 使用 clientDB 提交数据
				db.collection(dbCollectionName).add({
					userId: this.userInfo._id,
					content: this.value,
					checked: false
				}).then((res) => {
					console.log('todo id', res.result.id)
					this.list.unshift({
						_id: res.result.id,
						content: this.value,
						checked: false
					})
					this.value = ''
					this.aniClose()
				}).catch((err) => {
					uni.showModal({
						content: err.message || '请求服务失败',
						showCancel: false
					})
				})
			},
			// todo点击
			finish(id) {
				let index = this.list.findIndex((item) => item._id === id)
				// console.log('被点击了', this.list[index])
				this.list[index].checked = !this.list[index].checked
				// 更新数据库
				// 添加到数据库
				db.collection(dbCollectionName).where({
					_id: id,
				}).update({
					checked: this.list[index].checked
				}).catch((err) => {
					uni.showModal({
						content: err.message || '请求服务失败',
						showCancel: false
					})
				})
			},
			// tab切换
			tab(index) {
				this.activeTabIndex = index
			}
		}
	}
</script>

<style>
	@import'../../common/icon.css';

	.todo-header {
		position: fixed;
		/* #ifdef H5 */
		top: 44px;
		/* #endif */
		/* #ifdef MP */
		top: 0px;
		/* #endif */
		/* #ifdef APP */
		top: 0px;
		/* #endif */
		left: 0;
		display: flex;
		align-items: center;
		padding: 0 15px;
		font-size: 12px;
		color: #333333;
		width: 100%;
		height: 45px;
		box-sizing: border-box;
		box-shadow: -1px 1px 5px 0 rgba(0, 0, 0, 0.1);
		background-color: #FFFFFF;
		z-index: 10;
	}

	.todo-header__left {
		width: 100%;
	}

	.active-text {
		font-size: 14px;
		color: #279abf;
		padding-right: 10px;
	}

	.todo-header__right {
		flex-shrink: 0;
		display: flex;
	}

	.todo-header__right-item {
		padding: 0 5px;
	}

	.active-tab {
		color: #2979FF;
	}

	.todo-content {
		position: relative;
		padding-top: 50px;
		padding-bottom: 100px;
	}

	.todo-list {
		position: relative;
		display: flex;
		align-items: center;
		padding: 15px;
		margin: 15px;
		color: #d9dadc;
		font-size: 14px;
		border-radius: 10px;
		background-color: #CFEBFD;
		box-shadow: -1px 1px 5px 1px rgba(0, 0, 0, 0.1), -1px 2px 1px 0 rgba(255, 255, 255) inset;
		overflow: hidden;
	}

	.todo-list:after {
		position: absolute;
		content: '';
		top: 0;
		bottom: 0;
		left: 0;
		width: 5px;
		background-color: #91d1e8;
	}

	.todo-list__checkbox {
		padding-right: 15px;
	}

	.checkbox {
		width: 20px;
		height: 20px;
		border-radius: 50%;
		background-color: #FFFFFF;
		box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.1);
	}

	.todo--finish .checkbox {
		position: relative;
		background-color: #eee;
	}

	.todo--finish .checkbox:after {
		content: '';
		position: absolute;
		width: 10px;
		height: 10px;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		margin: auto;
		border-radius: 50%;
		background-color: #CFEBFD;
		box-shadow: 0 0 2px 0px rgba(0, 0, 0, 0.2) inset;
	}

	.todo--finish .todo-list__content {
		color: #999999;
	}

	.todo--finish.todo-list:before {
		content: '';
		position: absolute;
		top: 0;
		bottom: 0;
		left: 40px;
		right: 10px;
		height: 2px;
		margin: auto 0;
		background-color: #bdcdd8;
	}

	.todo--finish.todo-list:after {
		background-color: #ccc;
	}

	.create-todo {
		display: flex;
		justify-content: center;
		align-items: center;
		position: fixed;
		/* #ifdef H5 */
		bottom: 60px;
		/* #endif */
		/* #ifdef MP */
		bottom: 20px;
		/* #endif */
		/* #ifdef APP */
		bottom: 20px;
		/* #endif */
		left: 0;
		right: 0;
		margin: 0 auto;
		width: 50px;
		height: 50px;
		border-radius: 50%;
		background-color: #CFEBFD;
		box-shadow: -1px 1px 5px 2px rgba(0, 0, 0, 0.1), -1px 1px 1px 0 rgba(255, 255, 255) inset;
	}

	.icon-jia {
		font-size: 25px;
		color: #88d4ec;

		transition: transform 0.3s;
	}

	.create-content {
		position: fixed;
		/* #ifdef H5 */
		bottom: 135px;
		/* #endif */
		/* #ifdef MP */
		bottom: 95px;
		/* #endif */
		/* #ifdef APP */
		bottom: 95px;
		/* #endif */
		left: 20px;
		right: 20px;

		transition: all 0.3s;
		opacity: 0;
		transform: scale(0) translateY(200%);
	}

	.create-content-box {
		display: flex;
		align-items: center;
		padding: 0 15px;
		padding-right: 0;
		border-radius: 50px;
		background-color: #CFEBFD;
		box-shadow: -1px 1px 5px 2px rgba(0, 0, 0, 0.1), -1px 1px 1px 0 rgba(255, 255, 255) inset;
		z-index: 2;
	}

	.create-input {
		width: 100%;
		padding-right: 15px;
		color: #add8e6;
	}

	.create-button {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-shrink: 0;
		width: 80px;
		height: 50px;
		border-radius: 50px;
		font-size: 16px;
		color: #88d4ec;
		box-shadow: -2px 0px 2px 1px rgba(0, 0, 0, 0.1);
	}

	.create-content:after {
		content: '';
		position: absolute;
		right: 0;
		left: 0;
		bottom: -8px;
		margin: 0 auto;
		width: 20px;
		height: 20px;
		background-color: #CFEBFD;
		transform: rotate(45deg);
		box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.1);
		z-index: -1;
	}

	.create-content-box:after {
		content: '';
		position: absolute;
		right: 0;
		left: 0;
		bottom: -8px;
		margin: 0 auto;
		width: 20px;
		height: 20px;
		background-color: #CFEBFD;
		transform: rotate(45deg);
	}

	.default {
		padding-top: 100px;
	}

	.image-default {
		display: flex;
		justify-content: center;
	}

	.image-default image {
		width: 100%;
	}

	.defualt-info {
		text-align: center;
		font-size: 14px;
		color: #cccccc;
	}

	.create-todo-active {
		transform: rotate(135deg);
	}

	.create-active {
		opacity: 1;
		transform: scale(1) translateY(0);
	}
</style>
